<template>
	<view style="height: 100%;">
		<view class="box">
			<view class="box-header flex-between">
				<view class="flex-align-center">
					<view class="datetime-box">
						<uni-datetime-picker v-model="rangeData" type="daterange"
							rangeSeparator="至" />
					</view>
					
					<uni-data-select v-model="value" placeholder="选择题型" :localdata="range"
						@change="change"></uni-data-select>
					<uni-data-select v-model="value" placeholder="选择难度" :localdata="range"
						@change="change"></uni-data-select>
					<uni-data-select v-model="value" placeholder="选择阶段" :localdata="range"
						@change="change"></uni-data-select>
					<uni-data-select v-model="value" placeholder="选择知识点" :localdata="range"
						@change="change"></uni-data-select>
				</view>
				<view class="search-btn flex-center">
					查询
				</view>
			</view>
			<view class="uni-list">
				<checkbox-group @change="checkboxChange">
					<label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value">
						<view class="list-item">
							<view class="flex-align-center">
								<checkbox :value="item.value" :checked="item.checked" style="transform:scale(0.7)" />
								<view style="margin-left: 39rpx;">
									<span class="list-item-title">-Good morning,Eric.</span>
									<view class="list-item-desc">
										<span>提型: </span>
										<span>知识点 ：</span>
										<span>答对次数/总次数: </span>
										<span>最后答题结果： </span>
										<span>最后答题时间：</span>
									</view>
								</view>
							</view>
						</view>
					</label>
				</checkbox-group>
			</view>
			<!-- <view class="bottom-choose flex-align-center">
				<checkbox value="cb" :checked="checkAll" style="transform:scale(0.7)" @click="checkAll=!checkAll" />
				全选
				<span class="choose-text">已选:  <span> {{total}}</span></span>
				<view class="test-btn flex-center">
					错题自测
				</view>
			</view> -->

		</view>
		<view class="bottom-select flex-between">
			<view class="flex-center">
				<checkbox value="cb" :checked="checkAll" style="transform:scale(0.7)" @click="checkAll=!checkAll" />
				全选
				<span class="choose-text">已选: <span style="color:#FF4D07;margin-left:10rpx"> {{total}}</span></span>
			</view>
			<view class="test-btn flex-center">
				错题自测
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				value: "",
				rangeData: [],
				range: [{
						value: 0,
						text: "篮球"
					},
					{
						value: 1,
						text: "足球"
					},
					{
						value: 2,
						text: "游泳"
					},
				],
				total: 0,
				checkAll: false,
				items: [{
						value: 'USA',
						name: '美国'
					},
					{
						value: 'CHN',
						name: '中国',
						checked: 'true'
					},
					{
						value: 'BRA',
						name: '巴西'
					},
					{
						value: 'JPN',
						name: '日本'
					},
					{
						value: 'ENG',
						name: '英国'
					},
					{
						value: 'FRA',
						name: '法国'
					}
				]
			}
		},
		watch: {
			checkAll: {
				handler(val) {
					console.log(val, '参数');
					if (val === true) {
						this.items.forEach(i => {
							i.checked = true
						})
						this.total = this.items.length
					} else {
						this.items.forEach(i => {
							i.checked = false
						})
						this.total = 0
					}
				},
				deep: true,
			}
		},
		methods: {
			change(e) {
				console.log("e:", e);
			},
			checkboxChange(e) {
				let trueCount = 0;
				var items = this.items,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (values.includes(item.value)) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
					if (item.checked) {
						trueCount++;
					}
				}
				this.total = trueCount;
			},
		}
	}
</script>

<style lang="scss" scoped>
	@function px_2_vw($px) {
		@return #{$px * 100 / 1920}vw;
	}

	.box {
		background: #fff;
		border-radius: 65rpx;
		padding-bottom: 21rpx;
		margin: 0 54rpx 0rpx 54rpx;
		height: calc(100% - 130rpx);
		display: flex;
		flex-direction: column;

		.box-header {
			width: 100%;
			height: px_2_vw(132);
			background: radial-gradient(100% 100% at 0% 0%, #9CA1EF 3%, #DADDD8 33%, #EAC1FB 100%);
			border-radius: 65rpx 65rpx 0 0;
			padding: 0 39rpx;
			.datetime-box {
				width: px_2_vw(490);
				background: #fff;
				border-radius: 4px;
			}
		}
	}

	.uni-list {
		overflow-y: auto;
		height: calc(100vh - 400rpx);
		padding: 21rpx 24rpx;
	}

	.list-item {
		padding: 20rpx;
		width: 100%;
		height: px_2_vw(198);

		margin-bottom: 30rpx;
		position: relative;
		background: radial-gradient(100% 100% at 0% 0%, #B8BCF8 3%, #C7C7FB 40%, #EAC1FB 100%);

		.list-item-title {
			font-weight: 600;
			font-size: px_2_vw(30);
		}

		.list-item-desc {
			position: absolute;
			bottom: 20rpx;

			span {
				margin-right: 20rpx;
				font-size: px_2_vw(24);
				color: #534787;
			}
		}
	}

	.bottom-choose {
		justify-content: flex-end;
		font-size: px_2_vw(24);
		color: #000;
		padding-top: 20rpx;
	}

	.choose-text {
		margin: 0 12rpx 0 35rpx;

		font-size: px_2_vw(28);
	}

	.test-btn {
		background-color: #8277B2;
		width: px_2_vw(159);
		height: px_2_vw(66);
		font-size: px_2_vw(28);
		color: #fff;
		border-radius: 65rpx;
	}

	.bottom-select {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: px_2_vw(130);
		background: radial-gradient(100% 100% at 0% 0%, #B8BCF8 3%, #C7C7FB 40%, #EAC1FB 100%);
		z-index: 999;
		padding: 0 77rpx;
		color: #011D88;
	}
	
	.search-btn {
		width: px_2_vw(115);
		height: px_2_vw(54);
		background: #FF6000;
		border-radius: 50rpx;
		font-size: px_2_vw(28);
		color: #fff;
	}
	::v-deep .uni-stat__select {
		margin: 0 10rpx;
		 
	}
	::v-deep .uni-date-x uni-text{
		display: none;
	}
	::v-deep .uni-select__input-placeholder {
		font-size: 14px;
	}
</style>